<template> 
  <view class="container"> 
    <!-- 顶部导航栏 --> 
    <view class="nav-bar"> 
      <view class="back" @click="navigateBack"> 
        <uni-icons type="left" size="20"></uni-icons> 
      </view> 
      <view class="title">维修记录</view> 
      <view class="right"> 
        <uni-icons type="more-filled" size="20"></uni-icons> 
      </view> 
    </view> 
    
    <!-- 标签页 --> 
   <view class="bg"> 
    </view>
    <view class="tabs"> 
		<view
		  class="tab-item" 
		  :class="{ active: currentTab === 0 }" 
		  @click="switchTab(0)" 
		>已预约</view> 
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="switchTab(1)" 
      >进行中</view> 
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 2 }" 
        @click="switchTab(2)" 
      >已完成</view> 
    </view> 
    
    <!-- 筛选区域 --> 
    <view class="filter-section"> 
      <view class="filter-item"> 
	  <text>总条数：{{total}}</text> 
        <text>维修方式:</text> 
        <uni-data-select 
          v-model="repairType" 
          :localdata="repairTypes" 
          placeholder="全部" 
          @change="handleRepairTypeChange"
        ></uni-data-select> 
      </view> 

    </view> 
    
    <!-- 订单列表 --> 
    <view class="order-list"> 
      <view class="order-item" style="text-align: center;" v-if="reservationList.length==0">
        暂无数据
      </view>
      <view class="order-item" v-for="(item, index) in reservationList" :key="index"> 
        <view class="order-info"> 
          <view class="info-row"> 
            <text class="label">维修单号:</text> 
            <text class="value">{{ item.id }}</text> 
		<!-- 	<view>{{item.status}}</view> -->
			<view :style="{
						  color: item.status === 0 ? '#1890ff' : 
								item.status === 1 ? '#faad14' : '#52c41a',
						  fontSize: '14px'
						}">
						{{ 
						  item.status === 0 ? '已预约' : 
						  item.status === 1 ? '进行中' : '已完成' 
						}}</view>
          </view> 
          <view class="info-row"> 
            <text class="label">维修方式:</text> 
            <text class="value">{{ item.type === 0 ? '到店维修' : '上门取车' }}</text>
          </view> 
         <view class="info-row"> 
            <text class="label">预约日期:</text> 
            <text class="value">{{ item.reservationTime }}</text> 
			<view style="background-color: #557AD6; color: white;padding: 1px 5px;border-radius: 5px;" @click="toRecords(item.id)">查看详细</view>
          </view>
        </view> 
      </view> 
    </view> 
  </view> 
</template> 

<script setup>
import { ref } from 'vue';
import { onLoad,onUnload } from '@dcloudio/uni-app'
import request from '/pages/utils/request.js';
import baseUrl from '../../utils/urlConfig.js';

// 总体数
const total =ref(0)

onLoad(()=>{
	getInfo()
	queryByVerificationCode()
	 // 添加刷新监听
	 uni.$on('refreshPage', () => {
    queryByVerificationCode()
  })
})
onUnload(() => {
  uni.$off('refreshPage')
})
// 获取店铺id信息
function getInfo() {
  const Info = uni.getStorageSync('info');
  queryParams.value.mid=Info.mid
}
// 获取信息
const queryParams = ref({
	pageNum: 1,
	pageSize: 10,
	mid: '',
	type: '',
	status: '0',
})
const reservationList = ref()
// 根据用户id查询维修预约表
function queryByVerificationCode() {
	console.log(queryParams.value)
	request({
		url: baseUrl + '/yyq/reservation/list',
		method: 'get',
		data: queryParams.value,
		success: (res) => {
			if (res.data && res.data.code === 200) { // 检查后端返回的状态码
				reservationList.value = res.data.rows
				total.value=res.data.total
				// console.log(res.data.total)
			}
		},
	})
}


// 定义响应式数据
const currentTab = ref(0);
const repairType = ref('')
const repairTypes = ref([
	{
		text:'全部',
		value:''
	},
	{
		text:'到店维修',
		value:'0'
	},
	{
		text:'上门取车',
		value:'1'
	}
]);
const appointmentDate = ref('');


// 定义方法
const navigateBack = () => {
  uni.navigateBack();
};

const switchTab = (index) => {
  currentTab.value = index;
  queryParams.value.status=index
  queryByVerificationCode()
  // TODO: 根据tab切换加载不同状态的订单 
};
function handleRepairTypeChange(e) {
  queryParams.value.type = e // 更新查询参数
  queryByVerificationCode() // 重新查询数据
}

function toRecords(e) {
	console.log("查看详细"+e)
		uni.navigateTo({
			 url: `/pages/index/weixiurenwu/weixiuxiangqing/weixiuxiangqing?id=${e}`
		})
	}
	
</script> 

<style lang="scss" scoped> 


.bg{ 
  width: 100%; 
  height: 210rpx; 
  background-color: #007aff; 
} 
.container { 
  min-height: 100vh; 
  background-color: #f5f5f5; 
} 

.nav-bar { 
  display: flex; 
  align-items: center; 
  height: 44px; 
  background-color: #007AFF; 
  color: #fff; 
  padding: 0 15px; 
  
  .back { 
    width: 44px; 
  } 
  
  .title { 
    flex: 1; 
    text-align: center; 
    font-size: 18px; 
  } 
  
  .right { 
    width: 44px; 
    text-align: right; 
  } 
} 

.tabs { 
  margin-left: 10px; 
  margin-right: 10px; 
  margin-top: -200rpx; 
  border-top-right-radius: 20px; 
  border-top-left-radius: 20px; 
  display: flex; 
  background-color: #fff; 
  border-bottom: 1px solid #eee; 
  
  .tab-item { 
    flex: 1; 
    height: 44px; 
    line-height: 44px; 
    text-align: center; 
    font-size: 15px; 
    color: #333; 
    position: relative; 
    
    &.active { 
      color: #007AFF; 
      
      &::after { 
        content: ''; 
        position: absolute; 
        bottom: 0; 
        left: 50%; 
        transform: translateX(-50%); 
        width: 20px; 
        height: 2px; 
        background-color: #007AFF; 
      } 
    } 
  } 
} 

.filter-section { 
  margin-left: 10px; 
  margin-right: 10px; 
  background-color: #fff; 
  padding: 10px 15px; 
  
  .filter-item { 
    display: flex; 
    align-items: center; 
    margin-bottom: 10px; 
    
    text { 
      width: 80px; 
      font-size: 14px; 
      color: #333; 
    } 
  } 
} 

.order-list { 
  padding: 10px; 
  
  .order-item { 
    background-color: #fff; 
    border-radius: 8px; 
    padding: 15px; 
    margin-bottom: 10px; 
    
    .info-row { 
      display: flex; 
      margin-bottom: 8px; 
      
      &:last-child { 
        margin-bottom: 0; 
      } 
      
      .label { 
        width: 80px; 
        color: #666; 
        font-size: 14px; 
      } 
      
      .value { 
        flex: 1; 
        color: #333; 
        font-size: 14px; 
      } 
    } 
  } 
} 
</style> 